<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { useUserStore } from '@/stores/userStore';
import { ElMessage } from 'element-plus'
const userStore = useUserStore()
const route = useRouter()
const form = ref({
    name: '',
    account: '12345678910',
    password: '123456',
    checkpassword: '123456',
    agree: true
})
const rules = {
    name: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { min: 1, max: 10, message: '用户名不超过10个字符', trigger: 'blur' }
    ],
    account: [
        { required: true, message: '账号不能为空', trigger: 'blur' },
        { min: 11, max: 11, message: '请输入11位账号', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 14, message: '密码长度为6-14个字符', trigger: 'blur' },
    ],
    checkpassword: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 14, message: '密码长度为6-14个字符', trigger: 'blur' },
    ],
    agree: [
        {
            validator: (rule, value, callback) => {

                // 自定义校验逻辑
                // 勾选就通过 不勾选就不通过
                if (value) {
                    callback()
                } else {
                    callback(new Error('请勾选协议'))
                }
            }
        }
    ]
}
const formRef = ref(null)
const doRegister = () => {
    const { name, account, password, checkpassword } = form.value
    if (password != checkpassword) {
        ElMessage({ type: 'info', message: '密码前后不一致' })
        return;
    }
    // 调用实例方法
    formRef.value.validate(async (valid) => {
        // valid: 所有表单都通过校验  才为true

        // 以valid做为判断条件 如果通过校验才执行登录逻辑
        if (valid) {
            // TODO LOGIN
            const res = await userStore.userRegister(account, name, password)
            if (res == 1) {
                ElMessage({ type: "success", message: '注册成功,请重新登录' })
                route.replace({ path: '/userLogin' })
            }
            else ElMessage({ type: "error", message: "账号重复" })
        }
    })
}
</script>
<template>
    <el-container style="width: 1200px;height: 650px;margin:0px auto;">
        <el-header
            style="text-align: center; border-top-right-radius: 5px;border-top-left-radius: 5px; background-color: black;padding: 0px;height: 50px;color:#cdcdcd;">
            <el-link :underline="false" style="position:fixed;top:20px;left: 20px;"
                @click="route.replace({ path: '/home' })">&lt;首页</el-link>
            <p style="display: inline-block;margin-block-start: 11px;margin-block-end: 0;">
                注册
            </p>
        </el-header>
        <el-main>
            <el-form ref="formRef" :model="form" :rules="rules"
                style="width: 500px;height: 300px;margin: 0px auto;padding:50px;box-shadow:0 10px 5px 5px #cdcdcd ;"
                label-width="100px" label-position="left">
                <el-form-item prop="name" label="用户名">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item prop="account" label="账户">
                    <el-input v-model="form.account" />
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input type="password" show-password v-model="form.password" />
                </el-form-item>
                <el-form-item prop="checkpassword" label="确认密码">
                    <el-input type="password" show-password v-model="form.checkpassword" />
                </el-form-item>
                <el-form-item prop="agree" label-width="22px">
                    <el-checkbox size="large" v-model="form.agree">
                        我已同意隐私条款和服务条款
                    </el-checkbox>
                </el-form-item>
                <el-button size="large" type="primary" style="width:100%" @click="doRegister">点击注册</el-button>
            </el-form>
        </el-main>
    </el-container>
</template>

<style scoped></style>